vue 视频播放器 xgplayer 实践

2023-09-02 07:57| 来源: 网络整理| 查看: 265

简介 xgplayer 西瓜播放器西瓜播放器是一个基于HTML5播放器，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。支持自定义ui，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。支持播放格式 MP4 HLS FLV MPEG-DASH 起步安装 # 最新稳定版 $ npm install xgplayer 对于已有项目也可以通过 CDN 引入，代码如下：

注意: 生产环境使用时请在CDN地址中锁定版本，CDN使用方法参考 jsdelivr

使用在页面提供占位 DOM 实例化 let player = new Player({ id: 'mse', url: '//abc.com/**/*.mp4' }); 上边其实就已经完成了最简单的MP4播放，但是原生video就能搞定的东西谁会用它呢？实践,在vue中播放flv视频流安装首先依然是下载稳定版的xgplayer # 最新稳定版 $ npm install xgplayer 然后安装flv插件文档插件地址,提供两种插件 xgplayer-flv 示例地址 xgplayer-flv 对于flv协议的点播(直播)可以使用该插件完成，这个插件没依赖任何第三方代码完全自主实现。优点是代码结构清晰、比flv.js轻量很多、官方维护。执行 npm i xgplayer-flv安装 import 'xgplayer'; import FlvPlayer from 'xgplayer-flv'; let player = new FlvPlayer({ id: 'xg', url: './xgplayer-demo.flv', poster: './poster.png', isLive: false, preloadTime: 30, minCachedTime: 5, cors: true }) xgplayer-flv插件在xgplayer播放器基础配置的基础上还具有一些可选的特殊配置项。 | 配置项 | 含义 |默认值 | | ---- | ---- | ---- | | isLive | 是否直播 |false | | preloadTime | 预加载时长(秒) |false | | minCachedTime | 当前播放时间距离已缓存资源片段结束点剩多长时间时开始请求新片段(秒) |false | | cors | 请求是否跨域 |true | xgplayer-flv.js示例地址对于flv协议的点播(直播)可以使用该插件完成，这个插件依赖flv.js。 import 'xgplayer'; import FlvJsPlayer from 'xgplayer-flv.js'; let player = new FlvJsPlayer({ id: 'xg', url: '//abc.com/**/*.flv', hasVideo: true, hasAudio: true, flvOptionalConfig: { enableWorker: true } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config) }) xgplayer-flv.js插件在xgplayer播放器基础配置的基础上还具有一些flv.js专属配置项，请参考 flv.js配置

注意 xgplayer-flv和xgplayer-flv.js插件在请求跨域视频源时需要视频源端带range服务。

完整vue内示例例子包含视频截图，监听截图事件(官网未标出)，获取截图后转base64 直接img贴图，base64转文件。 // 播放器 // 截图图片展示 import 'xgplayer'; import FlvPlayer from 'xgplayer-flv'; export default { name: "xgplayer", data() { return { imgurl: '' } }, mounted() { this.initVideo() }, methods: { initVideo() { let player = new FlvPlayer({ id: 'mse', url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv', videoInit: true, // 显示首帧 lang: 'zh-cn', // fluid: true, autoplay: false, screenShot: true, isLive: true, preloadTime: 30, minCachedTime: 5, cors: true }) // 监听播放器截图事件 player.on('screenShot', screenShotImg=> { // 替换type类型 let base64Data = screenShotImg.replace('data:application/octet-stream;base64', 'data:image/png;base64') // 转文件 // this.imgurl = this.getBaseImage(base64Data, '1.png') // base64直接赋值img标签展示 this.imgurl = base64Data console.log(screenShotImg, this.imgurl) }) }, // base64转文件 getBaseImage(dataUrl, fileName) { let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while(n--){ u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], fileName, {type:mime}) }, } } 官方文档地址最后播放器不支持 rtmp，如果需要建议使用 vue-video-player 其播放rtmp依赖 videojs-flash

【本文地址】

公司简介

联系我们